<template>
  <div class="nice">
    <h2>{{ info }}</h2>
    <h3>歌手姓名：{{ name }}</h3>
    <h3>性别：{{ sex }}</h3>
    <h3>出生年份：{{ birthDate }}</h3>
    <h3>身高：{{ myHeight }}</h3>
    <button @click="updateHieght">点击修改身高</button>
  </div>
</template>

<script>
export default {
  name: "Singer",
  data() {
    console.log(this);
    return {
      info: "歌手信息介绍",
      // 使用自定义字段来接收父组件传递的数据
      myHeight: this.height,
    };
  },
  methods: {
    updateHieght() {
      console.log("this.height=", this.height);
      this.myHeight++;
    },
  },
  //简单声明接收
  //props:["name","sex","birthDate","height"]

  //接收的同时对数据进行类型限制
  /*
  props:{
    name: String,
    sex: String,
    birthDate: String,
    //要求身高传递数字类型
    height: Number
  }
  */

  // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制
  props: {
    name: {
      type: String, //类型是字符串
      required: true, //必填项
    },
    sex: {
      type: String, //字符串类型
      required: false, // 非必填项
    },
    birthDate: {
      type: String,
      default: "1986年",
    },
    height: {
      type: Number, //数字类型
      required: true,
    },
  },
};
</script>

<style>
.nice {
  background-color: purple;
}
</style>